<template>
  <div class="login">
    <van-nav-bar
      title="登录页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="1"
    />
    <van-form @submit="login">
      <van-field
        class="input"
        v-model="userPhone"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写合法手机号' }]"
      />
      <van-field
        class="input"
        v-model="userPass"
        type="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码，长度为4位的数字' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
  <!-- 使用vant-ui的form表单组件，首先要导入、注册button组件，否侧form表单组件的样式无法生效，报错<van-button>未注册 -->
</template>

<script>
import { Toast } from "vant";
import { user_login } from "@/utlis/api";
export default {
  data() {
    return {
      userPhone: "",
      userPass: "",
      // rules:{
      //     userPhone:{
      //         rule:/^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      //         msg:"请输入合法手机号",
      //     },
      //     userPass:{
      //         rule:/^\w{4}$/,
      //         msg:"密码请输入4位数字"
      //     }
      // }
    };
  },
  methods: {
    login() {
      // if( !this.validation('userPhone')) return;
      // if( !this.validation('userPass')) return;
      user_login({ phone: this.userPhone, pass: this.userPass }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          Toast.success(res.data.msg);
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userinfo", JSON.stringify(res.data.userinfo));
          setTimeout(()=>{
            this.$router.push("/");
          },1000)
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    // validation(key) {
    //   let bool = true;
    //   if (!this.rules[key].rule.test(this[key])) {
    //     // 提示信息
    //     Toast(this.rules[key].msg);
    //     bool = false;
    //     return false;
    //   }
    //   return bool;
    // },
  },
};
</script>

<style lang="scss" scoped>
// .login {
//   .title {
//     text-align: center;
//     padding: 20px;
//     font-weight: 600;
//   }
//   input {
//     border: 0;
//     outline: none;
//     width: 100%;
//     height: 40px;
//     padding: 20px;
//     box-sizing: border-box;
//     border: 1px solid #ccc;
//     border-radius: 20px;
//     margin: 20px 0;
//     line-height: 0px;
//   }
//   .btn {
//     input {
//       background-color: lightskyblue;
//     }
//   }
// }
.login{
    .input{
        width: 92%;
        margin: 30px auto;
        border: 1px solid #ccc;
        border-radius: 23px;
        text-align: center;
    }
    ::v-deep .van-field__control{
        text-align: center;
    }
    ::v-deep .van-button{
        height: 46px;
    }
}
</style>